<template>
	<view class="container">
		<view class="foster-order-top" v-if="user!=''">
			<view class="top">
				<image :src="user.head_pic" mode="widthFix"></image>
				<view class="nickname">{{user.nickname}}</view>
			</view>
			<view class="shuju-items">
				<view class="shuju-item" @click="navigateTo('/pages/center/month-fh-log-list?status=-1')">
					<view class="hint">待发放</view>
					<view class="num">{{user.td_fh_dff}}</view>
				</view>
				<view class="shuju-item" @click="navigateTo('/pages/center/month-fh-log-list?status=1')">
					<view class="hint">待领取</view>
					<view class="num">{{user.td_fh_dlq}}</view>
				</view>
				<view class="shuju-item" @click="navigateTo('/pages/center/month-fh-log-list?status=2')">
					<view class="hint">已领取</view>
					<view class="num">{{user.td_fh_ylq}}</view>
				</view>
				<view class="shuju-item" @click="navigateTo('/pages/center/month-fh-log-list')">
					<view class="hint">分红总额</view>
					<view class="num">{{user.td_fh_zong}}</view>
				</view>
			</view>
			<button class="lq-btn" :disabled="btnDisabled" @click="lingqu">{{btnDisabled?'已领取':'领取'}}</button>
		</view>
		<view class="foster-order-items">
			<view class="items" v-if="list.length>0">
				<view class="money-container">
					<view class="money-item" v-for="(item,index) in list" :key="index">
						<view class="money-item-left">
							<text class="desc">{{item.desc}}</text>
							<text class="time">{{item.add_time}}</text>
						</view>
						<text class="right" v-if='item.money>0'>+{{item.money}}元</text>
						<text class="right red" v-if='item.money<0'>{{item.money}}元</text>
					</view>
					<u-loadmore :status="hasMore?'loading':'nomore'" />
				</view>
			</view>
			<view class="empty-container" v-else>
				<u-empty text="暂无相关数据" :icon="emptyIcon"/>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				user:'',
				currentIndex: 0,
				btnDisabled:false,
				emptyIcon:'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/empty.png',
				hasMore:true,
				pageIndex:1,
				list:[],
			};
		},
		onReachBottom() {
			if(_this.hasMore){
				_this.pageIndex++
				_this.get_list()
			}
		},
		methods: {
			//奖励领取
			async lingqu() {
				_this.btnDisabled=true
				const data = await _this.$post('api/td_fh_lq')
				if (data.code == 200) {
					this.$u.toast(data.msg)
					this.get_user_info()
					this.pageIndex=1
					this.list=[]
					this.get_list()
				} else {
					this.$u.toast(data.msg)
					setTimeout(()=>{
						_this.btnDisabled=false
					},2000)
				}
			},
			//获取用户信息
			async get_user_info() {
				// post请求
				const data = await _this.$post('api/UserInfo')
				if (data.code == 200) {
					this.user = data.data.user
					_this.btnDisabled=this.user.td_fh_dlq<=0
				} else {
					this.$u.toast(data.msg)
				}
			},
			toDetail(item){
				uni.navigateTo({
					url:`/pages/foster/foster-order-detail?id=${item.order_id}`
				})
			},
			async get_list(){
				const params = {
					pageIndex: this.pageIndex,
					pageSize:20,
				}
				const data = await _this.$post('api/td_fh_lq_list',params)
				if(data.code==200){
					_this.list.push(...data.data.list)
					_this.hasMore=data.data.list.length>=20
				}else{
					_this.hasMore=false
				}
			}
		},
		onLoad(e) {
			_this = this;
			if(e.currentIndex){
				_this.currentIndex=e.currentIndex
			}
			_this.get_list()
		},
		onShow() {
			_this.get_user_info()
		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/order.scss";
	@import "@/static/css/user.scss";
	.container {
		padding: 0;

		.foster-order-top {
			.top {
				background: $theme-color;
				@include flex-box(column, center, center);
				height: 300rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.nickname {
					margin-top: 20rpx;
					color: #fff;
					font-size: 32rpx;
				}
			}

			.shuju-items {
				background: #fff;
				padding: 0 30rpx;
				@include flex-box(row, null, center);
				height: 160rpx;

				.shuju-item {
					flex: 1;
					text-align: center;
					position: relative;

					&:not(:last-child)::after {
						content: '';
						width: 2rpx;
						height: 76rpx;
						background: $border-F7F7F7;
						position: absolute;
						right: 0;
						top: calc(50% - 38rpx);
					}

					.hint {
						font-size: 22rpx;
						font-weight: bold;
					}

					.num {
						font-size: 30rpx;
						font-weight: 500;
						margin-top: 30rpx;
					}
				}
			}
			.lq-btn{
				background: $theme-color;
				margin: 0 auto;
				border-radius: 40rpx;
				margin: 20rpx 30rpx 0 30rpx;
				color: #fff;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-weight: 500;
				border-radius: 50rpx;
				&[disabled]{
					background:rgba($color: $theme-color, $alpha: 0.5);
					color: #fff;
				}
			}
		}

		.foster-order-items {
			margin-top: 20rpx;
			.items{
				padding: 0 30rpx;
			}
		}
	}
</style>